<template>
    <div class="cont">
        <HpToptitle><p slot="topic">考勤</p></HpToptitle>
        <div class="left">
            <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </div>
        <div class="right">
            <div class="content">
                <div class="title">
                    <p><span style="color: #999999;">考勤 > 考勤管理  > </span><span>考勤组管理</span></p>
                </div>
                <div class="neicont">
                    <div class="bluetitle">
                        <div class="blu"></div>
                        <div class="blutxt">通讯录</div>
                    </div>
                    <div class="line">
                        <img src="https://preview.axure6.com/194/images/%E9%80%9A%E8%AE%AF%E5%BD%95/u1139.svg" alt="">
                    </div>
                    <div class="search">
                        <div class="op-left">
                            <input type="text" id="ipt" placeholder="请输入关键字">
                            <div class="search-pic">
                                <img src="https://preview.axure6.com/194/images/%E9%80%9A%E8%AE%AF%E5%BD%95/u1134.svg" alt="">
                            </div>
                        </div>
                        <div class="op-right">
                            <div class="m1">
                                <div class="m1-1"><img src="https://preview.axure6.com/194/images/%E6%97%A5%E7%A8%8B%E5%BE%85%E5%8A%9E/u967.svg" alt=""></div>
                                <div>新增考勤组</div>
                            </div>
                        </div>
                    </div>
                   <!-- 表格 -->
                   <div class="form">
                        <template>
                            <el-table
                                ref="multipleTable"
                                :data="tableData" stripe
                                tooltip-effect="dark"
                                style="width: 100%"
                                @selection-change="handleSelectionChange">
                                <el-table-column
                                type="selection"
                                width="55">
                                </el-table-column>
                                <el-table-column
                                label="员工名字"
                                width="120">
                                <template slot-scope="scope">{{ scope.row.date }}</template>
                                </el-table-column>
                                <el-table-column
                                prop="name"
                                label="工号"
                                width="120">
                                </el-table-column>
                                <el-table-column
                                prop="address"
                                label="部门" width="142"
                                show-overflow-tooltip>
                                </el-table-column>
                                <el-table-column
                                prop="name"
                                label="职位"
                                width="145">
                                </el-table-column>
                                <el-table-column
                                prop="name"
                                label="手机号码"
                                width="119">
                                </el-table-column>
                                <el-table-column
                                prop="name"
                                label="邮箱"
                                width="119">
                                </el-table-column>
                                <el-table-column
                                fixed="right"
                                label="操作"
                                width="170">
                                <template slot-scope="scope">
                                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                                    <el-button type="text" size="small">编辑</el-button>
                                    <el-button
                                    @click.native.prevent="deleteRow(scope.$index, tableData)"
                                    type="text"
                                    size="small">
                                    移除
                                    </el-button>
                                </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </div>
                    <!-- 分页 -->
                    <div class="block">
                        <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage4"
                        :page-sizes="[100, 200, 300, 400]"
                        :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="400">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import HpToptitle from './HpToptitle.vue';
export default {
    components:{
        HpToptitle
    },
    data(){
        return {
            data: [{
                label: '组织架构',
                children: [{
                    label: '二级 1-1',
                },{
                    label: '二级 1-2',
                    
                },{
                    label: '二级 1-3',
                    
                },{
                    label: '二级 1-1',
                }]
                }, {
                label: '一级 2',
                children: [{
                    label: '二级 2-1',
                }, {
                    label: '二级 2-2',
                    
                }]
                }, {
                label: '一级 3',
                children: [{
                    label: '二级 3-1',
                    
                }, {
                    label: '二级 3-2',
                    
                }]
                },
            
            ],
            defaultProps: {
            children: 'children',
            label: 'label'
            },
            tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
            }],
            currentPage1: 5,
            currentPage2: 5,
            currentPage3: 5,
            currentPage4: 4
        }
    },
    methods:{
        handleNodeClick(data) {
            console.log(data);
        },
        // form表格函数
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //form表格点击
        handleClick(row) {
            console.log(row);
        },
        //form删除表格
        deleteRow(index, rows) {
            rows.splice(index, 1);
        },
        // 分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    }
}
</script>

<style lang="scss" scoped>
.cont{
    position: relative;
    display: flex;
.left{
    padding: 20px 10px 0;
    box-sizing: border-box;
    width: 200px;
    height: 100vh;
    position: fixed;
    left: 0px;
    top: 60px;
    z-index: 2;
    background-color: #fff;
}
.right{
    width: 100%;
    position: absolute;
    top: 60px;
    right: 0;
    // width: 1380px;
    height: 100vh;
    background-color: rgba(242, 243, 245, 1);
    .content{
        position: absolute;
        width: 1360px;
        height: 750px;
        left: 370px;
        padding-top: 20px;
        .title{
            text-align: left;
            font-size: 13px;
        }
.neicont{
    margin-top: 15px;
    width: 1360px;
    height: 750px;
    padding: 20px;
    box-sizing: border-box;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
        .bluetitle{
            display: flex;
            .blu{
                width: 6px;
                height: 20px;
                background: inherit;
                background-color: rgba(37, 97, 239, 1);
                border: none;
                border-radius: 8px;
            }
            .blutxt{
                height: 24px;
                line-height: 21px;
                margin-left: 10px;
                font-weight: 500;
                font-style: normal;
                font-size: 18px;
                color: rgba(51, 51, 51, 0.898039215686275);
            }
            }
        .line{
            margin-top: 10px;
            margin-bottom: 10px;
            height: 1px;
            width: 100%;
        }
        .search{
            position: relative;
                display: flex;
                justify-content: space-between;
                height: 35px;
                margin-top: 30px;
                .op-left{
                    position: relative;
                    width: 300px;
                    height: 32px;
                    box-sizing: border-box;
                    border-width: 1px;
                    border-style: solid;
                    border-color: rgba(228, 228, 228, 1);
                    border-radius: 4px;
                    #ipt{
                        caret-color: rgb(204, 204, 204);
                        margin-left: -60px;
                        width: 211px;
                        height: 30px;
                        padding: 2px 2px 2px 2px;
                        box-sizing: border-box;
                        font-weight: 400;
                        font-style: normal;
                        font-size: 14px;
                        letter-spacing: normal;
                        background-color: transparent;
                        border-color: transparent;
                        outline: none;
                    }
                    .search-pic{
                        position: absolute;
                        top: 4px;
                        right: 13px;
                    }
                }
                .op-right{
                        display: flex;
                        font-size: 14px;
                        .m1{
                            padding: 0px 0px 0px 16px;
                            width: 110px;
                            height: 32px;
                            display: flex;
                            align-items: center;    
                            white-space: nowrap;                   
                            background-color: rgba(37, 97, 239, 1);
                            border: none;
                            border-radius: 4px;
                            box-sizing: border-box;
                            font-weight: 400;
                            font-style: normal;
                            color: #FFFFFF;
                            line-height: 20px;
                            
                            .m1-1{
                                margin-top: -1px;
                                margin-right: 5px;
                            }
                        }
                }
        }
}
    }
}
}
.form{
    width: 1320px;
}
</style>